<template>
  <div class="manager_comment">
    <section class="manager_comment_header">
      <a-card>
        <a-form name="advanced_search" autocomplete="off" ref="searchFormRef" class="ant-advanced-search-form"
          :model="searchFormState">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item name="nickname" label="用户昵称">
                <a-input v-model:value="searchFormState.nickname" placeholder="请输入用户昵称" allowClear />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item name="postTitle" label="帖子标题">
                <a-input v-model:value="searchFormState.postTitle" placeholder="请输入帖子标题" allowClear />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item name="content" label="内容">
                <a-input v-model:value="searchFormState.content" placeholder="请输入内容" allowClear />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24" style="text-align: right">
              <a-button type="primary" @click="handleSearch">查询</a-button>
              <a-button style="margin: 0 8px" @click="handleReset">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
    </section>
    <section class="manager_comment_content">
      <a-card style="height: 100%">
        <a-row style="margin-top: 8px">
          <a-col :span="24">
            <a-table :dataSource="dataSource" :columns="columns" size="small" :pagination="false" :scroll="{ x: 1000 }">
              <template #bodyCell="{ column, record }">
                <a-space v-if="column.dataIndex === 'operation'">
                  <a-popconfirm title="确定要删除这条数据吗？" ok-text="确定" cancel-text="取消" @confirm="handleDelete(record.id)">
                    <a-button type="link" danger>删除</a-button>
                  </a-popconfirm>
                </a-space>
              </template>
            </a-table>
          </a-col>
        </a-row>
      </a-card>
    </section>
    <footer class="manager_comment_footer">
      <a-card style="height: 100%">
        <a-row align="middle">
          <a-col :span="24">
            <a-pagination :total="total" v-model:current="current" v-model:pageSize="pageSize" :showSizeChanger="true"
              showQuickJumper :show-total="(total) => `共 ${total} 条数据`" @change="onPageChange" />
          </a-col>
        </a-row>
      </a-card>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCommentList, deleteComment} from '@/apis/comment'

const searchFormRef = ref()
const dataSource = ref([])
const searchFormState = ref({
  nickname: "",
  postTitle:"",
  content: "",
})

const current = ref(1)
const total = ref(0)
const pageSize = ref(10)

const handleSearch = async () => {
  try {
    const { data = {} } = await getCommentList({
      pageNum: current.value,
      pageSize: pageSize.value,
      nickname: searchFormState.value.nickname,
      postTitle: searchFormState.value.postTitle,
      content: searchFormState.value.content,
    })
    dataSource.value = data?.list
    total.value = data?.total
  } catch (error) {
    console.log(error, 'get-comment-list-error')
  }
}

const handleDelete = async (id) => {
  await deleteComment(id)
  init()
}
const onPageChange = (page, Size) => {
  current.value = page
  pageSize.value = Size
  init()
}

const handleReset = () => {
  searchFormRef.value?.resetFields()
  init()
}
const init = async () => {
  try {
    const { data = {} } = await getCommentList({
      pageNum: current.value,
      pageSize: pageSize.value,
    })
    dataSource.value = data?.list
    total.value = data?.total
  } catch (error) {
    console.log(error, 'get-comment-select-list-error')
  }
}

onMounted(() => {
  init()
})

const columns = [
  {
    title: '帖子名称',
    dataIndex: 'postTitle',
    width: 160,
    align: 'center',
  },
  {
    title: '用户',
    dataIndex: 'nickname',
    width: 160,
    align: 'center',
  },
  {
    title: '内容',
    dataIndex: 'content',
    width: 220,
    align: 'center',
    ellipsis:true
  },
  {
    title: '评论时间',
    dataIndex: 'createTime',
    width: 160,
    align: 'center',
  }
];
</script>

<style lang="less" scoped>
.manager_comment {
  box-sizing: border-box;
  padding: 8px;
  display: flex;
  flex-direction: column;
  height: 100%;

  &_header {
    width: 100%;
    max-height: 200px;
  }

  &_content {
    margin-top: 8px;
    flex: 1;
    overflow: auto;
  }

  &_footer {
    margin-top: 8px;
    height: 80px;
  }
}
</style>
